<template>
    <div class="media-folder-list">
        <ul>
            <li v-for="item in list" :key="item.id" @click="openFolder(item)">
                <img src="@/assets/images/files/files-folder-view.png" alt="">
                <strong v-text="item.folder_name"></strong>
                <span>{{ item.quantity }} files</span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        list: { type: Array, default: () => [] },
    },
    data () {
        return {
        };
    },
    methods: {
        openFolder (item) {
            this.$emit("open", item);
        },
    },
};
</script>
<style lang="scss" scoped>
.media-folder-list {
    ul {
        display: flex;
        flex-wrap: wrap;
        margin: 4px -12px;
    }
    li {
        width: calc(20% - 20px);
        height: 128px;
        margin: 10px;
        position: relative;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        padding: 18px 14px;
        border-radius: 4px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
        transition: all 0.2s;

        img {
            width: 40px;
            height: 28px;
        }

        & > strong {
            margin-top: 20px;
            font-size: 14px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #212121;
            line-height: 16px;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        & > span {
            margin-top: 4px;
            font-size: 12px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 400;
            color: #087196;
            line-height: 14px;
        }

        &:hover {
            box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.12);
        }
    }
}
</style>
